<!--累计订单-->
<template>
  <CommonCard title="累计订单量" value="￥21,532,545">
    <template #default>
      <div id="total-orders-chart" style="width: 100%;height: 100%;"></div>
    </template>
    <template #footer>
      <span>昨日订单量</span>
      <span class="emphasize">￥30,000,000</span>
    </template>
  </CommonCard>
</template>

<script>
import commonCardMixin from '@/mixins/commonCardMixin'

export default {
  name: '',
  mixins: [commonCardMixin],
  mounted() {
    // 初始化chart
    this.chartInit()
  },
  methods: {
    chartInit() {
      const chartDom = document.getElementById('total-orders-chart')
      const chart = this.$echarts.init(chartDom)
      chart.setOption({
        xAxis: {
          type: 'category',
          show: false,
          // 默认x轴两侧会有一些间距false就是去掉
          boundaryGap: false
        },
        yAxis: {
          show: false
        },
        // 控制位置
        grid: {
          top: 0,
          bottom: 0,
          left: 0,
          right: 0
        },
        series: [
          {
            type: 'line',
            data: [620, 432, 220, 534, 321, 430, 220, 320, 532, 565],
            // 显示面积图
            areaStyle: {
              color: 'purple'
            },
            // 平滑展示
            smooth: true,
            // 线条的样式
            lineStyle: {
              width: 0
            },
            // 点的样式
            itemStyle: {
              opacity: 0
            }
          }
        ]
      })
      window.addEventListener('resize', () => {
        chart.resize({
          animation: {
            duration: 500,
            easing: 'linear'
          }
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
